<template>
  <div class="cont">
    <div class="dia">
      <div class="header">
        <div class="title">
          <el-icon style="margin-right:5px;">
            <DArrowRight />
          </el-icon>
          预案编辑
        </div>
        <div class="close" @click="emit('close')"></div>
      </div>
      <div class="content">
        <div class="left">
          <div class="sear">
            <el-input v-model="state.filterText" placeholder="请输入设备名称" suffix-icon="Search" />
          </div>
          <div class="tree">
            <el-tree ref="treeRef" default-expand-all :data="state.data" :filter-node-method="filterNode" draggable
              @node-drag-start="nodeDragStart" :props="{ label: 'cameraName' }" :allow-drag="() => { return true; }"
              :allow-drop="() => { return false; }" />
          </div>
        </div>
        <div class="right">
          <div class="inp">
            <span style="margin-right: 10px;">预案名称</span>
            <el-input v-model="state.pm.planName" class="cus" placeholder="请输入预案名称" style="width:200px;" />
          </div>
          <div class="txt">添加高点设备</div>
          <div class="gd">
            <div class="gdc" @drop="gdgrop" @dragover.prevent>
              <img class="img" :src="state.gdlist[0]?.coverPic" v-if="state.gdlist.length > 0" />
              <div class="close" v-if="state.gdlist.length > 0" @click="gddel">&nbsp;</div>
              <div class="emp" v-if="state.gdlist.length == 0">
                <img class="empimg" src="/images/video.png" />
                <span class="emptxt">拖动左侧设备移动到此框</span>
              </div>
            </div>
          </div>
          <div class="txt">添加低点设备</div>
          <div class="dd">
            <div class="ddc" ref="ddRef">
              <div class="gdc" :id="'dd' + index" @drop="ddgrop" @dragover.prevent
                v-for="(item, index) in (state.ddlist.length + 1 > 5 ? state.ddlist.length : state.ddlist.length + 1)"
                :key="index" style="margin-right: 5px;">
                <img class="img" :src="state.ddlist[index]?.coverPic" v-if="state.ddlist.length > index" />
                <div class="close" v-if="state.ddlist.length > index" @click="dddel(index)">&nbsp;</div>
                <div class="emp" v-if="state.ddlist.length == index">
                  <img class="empimg" src="/images/video.png" />
                  <span class="emptxt">拖动左侧设备移动到此框</span>
                </div>
              </div>
            </div>
            <div class="gdleft" v-if="state.ddlist.length > 2" @click="toleft">
              <el-icon>
                <ArrowLeft />
              </el-icon>
            </div>
            <div class="gdright" v-if="state.ddlist.length > 2" @click="toright">
              <el-icon>
                <ArrowRight />
              </el-icon>
            </div>
          </div>
          <div class="btns">
            <el-button class="cusb1" style="width:84px;" @click="emit('back')">取消</el-button>
            <el-button class="cusb2" style="width:84px;" @click="submit">保存</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
const props = defineProps({
  vid: String,
  cid: String
});
const emit = defineEmits(["close","back"]);
const state = reactive({
  data: [],
  filterText:'',
  pm:{},
  gdlist: [],
  ddlist: [],
  drapnode: null,
})
const treeRef = ref()
const ddRef = ref()
watch(() => state.filterText, (val) => {
  treeRef.value.filter(val)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.cameraName.includes(value)
}
const nodeDragStart = (node, ev) => {
  state.drapnode = node
}
const gdgrop = (ev) => {
  if (state.drapnode == null) return;
  //获取node信息，加入列表
  if (state.gdlist.length == 0) {
    state.gdlist.push({ ...state.drapnode.data })
  } else {
    state.gdlist[0] = { ...state.drapnode.data }
  }
  state.drapnode = null
}
const ddgrop = (ev) => {
  if (state.drapnode == null) return;
  //获取node信息，加入列表
  if (state.ddlist.length < 5) {
    state.ddlist.push({ ...state.drapnode.data })
  }
  state.drapnode = null
}
const toleft = () => {
  ddRef.value.scrollLeft -= 140;
  if (ddRef.value.scrollLeft < 0) {
    ddRef.value.scrollLeft = 0
  }
}
const toright = () => {
  ddRef.value.scrollLeft += 140;
}
const gddel = () => {
  state.gdlist = []
}
const dddel = (inx) => {
  state.ddlist.splice(inx, 1)
}

const getData = () => {
  useApi.post("/dynamicview/ar/highandlows", {}).then((res) => {
    state.data = []
    let hlist = res.data.highList
    hlist.forEach(element => {
      if (element.coverPic == null) {
        element.coverPic = '/images/bg.png'
      }
    });
    let llist = res.data.lowList
    llist.forEach(element => {
      if (element.coverPic == null) {
        element.coverPic = '/images/bg.png'
      }
    });
    state.data.push({ cameraId: 'gd', cameraName: '高点设备', children: hlist })
    state.data.push({ cameraId: 'dd', cameraName: '低点设备', children: llist })
    //处理数据,编辑数据时
    if (state.pm.planId){
      let high = hlist.find(x=>x.cameraId==state.pm.highCameraId)
      if(high){
        state.gdlist=[high]
      }
      let low = llist.filter(x=>state.pm.lowCameraIds.find(y=>y==x.cameraId));
      if(low)
        state.ddlist = low
    }
  });
}
const submit = () => {
  if (!state.pm.planName || state.pm.planName=='') {
    ElMessage.error('请输入预案名称')
    return
  }
  if(state.gdlist.length<1){
    ElMessage.error('请选择高点设备')
    return
  }
  if(state.ddlist.length<1){
    ElMessage.error('请选择高点设备')
    return
  }
  state.pm.highCameraId = state.gdlist[0].cameraId
  state.pm.lowCameraIds=state.ddlist.map(x=>x.cameraId)
  useApi.post("/arhome/inspection/edit", state.pm).then((res) => {
    emit('back')
  }).catch(err => {
    ElMessage.error(err.data.message)
  });
}
onMounted(() => {
  let store = useMyStore()
  state.pm = store.params.ya || {}
  console.log(state.pm)
  if (state.pm.planId) {
    state.pm.optType = 'U'
    state.pm.icon = [state.pm.iconId]
  } else {
    state.pm.optType = 'A'
  }
  getData()
})
//注销时 销毁组件
onBeforeUnmount(() => {

});
</script>

<style lang="scss" scoped>
.cont {
  width: 1020px;
}

.dia {
  margin-top: 5px;
  width: 1020px;
  height: 520px;
  background-image: url('/images/bgd.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 30px;
    display: flex;
    align-items: center;

    .title {
      margin-left: 10px;
      font-weight: 600;
      font-size: 14px;
      color: #FFFFFF;
      display: flex;
      align-items: center;
    }

    .close {
      margin: 6px 2px 0 auto;
      background-image: url('/images/close.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      width: 26px;
      height: 26px;
      cursor: pointer;
    }
  }

  .content {
    width: 100%;
    height: 490px;
    position: relative;
    display: flex;

    .left {
      margin-left: 2px;
      width: 218px;
      height: 100%;
      padding: 5px;
      background: linear-gradient(0deg, rgba(3, 62, 101, 0.74) 0%, rgba(11, 81, 127, 0.51) 100%);

      .tree {
        width: 100%;
        height: 440px;
        overflow-y: auto;

        .el-tree {
          margin-top: 5px;
          background: transparent;
          color: #FFFFFF;
          --el-tree-node-hover-bg-color: #67ADDC80;
        }
      }
    }

    .right {
      width: 800px;
      background: linear-gradient(0deg, #12609394 100%, #0D4F7CFF 0%);
      padding: 25px 30px;

      .txt {
        height: 40px;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;
      }

      .btns {
        margin-top: 10px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
      }

      .inp {
        height: 40px;
        display: flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #FFFFFF;

        input {
          width: 300px;
        }
      }

      .gd {
        width: 100%;
        height: 140px;
      }

      .dd {
        width: 100%;
        height: 140px;
        position: relative;

        .ddc {
          width: 100%;
          height: 100%;
          display: flex;
          overflow-x: hidden;
        }

        .gdleft {
          position: absolute;
          width: 30px;
          height: 30px;
          top: 45px;
          left: -15px;
          cursor: pointer;
          background: linear-gradient(90deg, rgba(3, 62, 101, 0.74) 0%, rgba(11, 81, 127, 0.51) 100%);
          color: #ffffff80;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .gdright {
          position: absolute;
          width: 30px;
          height: 30px;
          top: 45px;
          right: -15px;
          cursor: pointer;
          background: linear-gradient(90deg, rgba(3, 62, 101, 0.74) 0%, rgba(11, 81, 127, 0.51) 100%);
          color: #ffffff80;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
}

.gdc {
  width: 240px;
  height: 135px;
  background: #67ADDC66;
  position: relative;

  .close {
    position: absolute;
    top: 5px;
    right: 5px;
    background-image: url('/images/close.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 26px;
    height: 26px;
    cursor: pointer;
  }

  .img {
    width: 240px;
    height: 135px;
  }

  .emp {
    width: 240px;
    height: 135px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .empimg {
      width: 37px;
      height: 33px;
    }

    .emptxt {
      margin-top: 16px;
      font-weight: 600;
      font-size: 12px;
      color: #FFFFFF99;
      line-height: 17px;
    }
  }
}

:deep(.el-input) {
  --el-input-text-color: #ffffff;
  --el-input-bg-color: #003D6399;
}</style>